<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html,
        body {
            height: 100%;
        }

        .box {
            width: 100%;
            height: 100%;
            /* margin: 50px auto; */
        }

        /* 左侧购物清单样式 */
        .left-goodMenu {
            width: 1010px;
            height: 100%;
            float: left;
            margin-left: 50px;
            overflow: auto;
            /* background-color: aquamarine; */
        }

        .left-goodMenu .item {
            box-sizing: border-box;
            width: 23%;
            height: 425px;
            margin-left: 20px;
            margin-bottom: 20px;
            border: 1px solid rgb(127, 127, 127);
            float: left;
        }

        .left-goodMenu .item img {
            width: 100%;
            height: 310px;
        }

        .left-goodMenu .item p {
            margin-left: 40px;
            font-size: 20px;
            margin-top: 8px;
        }

        .left-goodMenu .item button {
            color: white;
            width: 130px;
            height: 30px;
            background-color: red;
            border: 0;
            margin-left: 20px;
        }

        /* 右侧栏购物车 */
        .right-shoppingcar {
            width: 470px;
            height: 100%;
            float: left;
            margin-left: 20px;
            border: 1px solid rgb(127, 127, 127);
            position: relative;
        }

        /* 购物车数据 */
        .right-shoppingcar .item {
            width: 100%;
            height: 90%;
            overflow: auto;
            /* background-color: pink; */
        }

        .right-shoppingcar .item .shop-item {
            width: 100%;
            height: 120px;
            display: flex;
            justify-content: space-around;
            position: relative;
            align-items: center;
            background-color: rgba(127, 255, 212, 0.13);
        }

        /* 购物车里的图 */
        .shop-item img {
            height: 100px;
            margin-top: -18px;
        }

        /* 购物车里的字 */
        .shop-item>span {
            display: inline-block;
            font-size: 18px;
            line-height: 120px;
        }

        .shop-item>span:last-child {
            position: absolute;
            bottom: -48px;
            left: 70px;
        }

        /* 购物车加购商品总数 */
        .total {
            font-weight: bold;
            margin-top: 20px;
            margin-left: 20px;
        }

        /* 购物车加减功能 */
        .count {
            width: 100px;
            border: 1px solid hotpink;
            height: 40px;
            display: flex;
            justify-content: space-around;
        }

        .count span {
            height: 100%;
            display: inline-block;
            flex: 1;
            text-align: center;
            line-height: 40px;
            border: 1px solid hotpink;
            cursor: pointer;
        }

        /* 删除 */
        .delete {
            cursor: pointer;
        }

        /* 总价与清除购物车 */
        .bottom {
            width: 100%;
            height: 10%;
            position: absolute;
            bottom: 0;
        }

        /* 总价 */
        .totalPrice {
            font-weight: bold;
            position: absolute;
            bottom: 20px;
            left: 20px;
        }

        .clear {
            font-weight: bold;
            position: absolute;
            bottom: 20px;
            right: 20px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="box">
        <!-- 购物车 -->
        <div class="left-goodMenu">
            <!-- 左边商品清单 -->
            <!-- <div class="item">
                <img src="../img/1.png" alt="">
                <p>老板椅</p>
                <p>10000</p>
                <button>加入购物车</button>
            </div> -->
        </div>

        <div class="right-shoppingcar">
            <!-- 右侧栏购物车 -->
            <div class="item">
                <!-- 购物车产品列表 -->
                <!-- <div class="shop-item">
                    <input type="checkbox">
                    <img src="../img/1.png" alt="">
                    <span>1000</span>
                    <div class="count">
                        <span class="jian">-</span>
                        <span>1</span>
                        <span class="jia">+</span>
                    </div>
                    <span class="delete">删除收藏</span>
                    <span>老板椅</span>
                </div>  -->
            </div>


            <div class="bottom"></div>
            <!-- 总价 -->
        </div>
    </div>
</body>

</html>
<script>
    var goodlist = [
        { count: 1, img: "../img/1.png", name: '高级办公椅', price: 10000 },
        { count: 1, img: "../img/2.png", name: '按摩椅', price: 1000 },
        { count: 1, img: "../img/3.png", name: '电动按摩椅', price: 100 },
        { count: 1, img: "../img/4.png", name: '高级电动按摩椅', price: 6000 },
        { count: 1, img: "../img/5.png", name: '老板椅', price: 8000 },
        { count: 1, img: "../img/6.png", name: '办公桌', price: 5000 },
        { count: 1, img: "../img/7.png", name: '可升降办公椅', price: 2000 },
        { count: 1, img: "../img/8.png", name: '可旋转办公椅', price: 5000 },
    ]

    var shoppingNum = []
    //定义一个空变量，用来保存每次点击加入购物车的数据

    //1.将购物车里的数据渲染到左侧页面
    function renderLeftGoods() {
        var oLeft = document.querySelector('.left-goodMenu')
        //     获取左边商品清单
        oLeft.innerHTML = goodlist.map((item) => {
            //     利用map循环遍历goodlist，将其数据赋给左边商品清单
            return `<div class="item">
                         <img src="${item.img}" alt="">
                        <p>${item.name}</p>
                         <p>${item.price}</p>
                        <button>加入购物车</button>
                     </div>`
        }).join('')
    }
    renderLeftGoods()

    //2.渲染右侧购物车
    function renderRightCar() {
        var oRight = document.querySelector('.right-shoppingcar .item')
        //获取右侧栏里的数据
        var count = 0;
        //定义一个空变量来记录点击次数并累加
        shoppingNum.forEach((item) => {
            //循环遍历购物清单里的每一项
            count += item.count
        })
        oRight.innerHTML = `<div class="total">购物车(${count})</div>`
        //渲染商品列表并拼接
        oRight.innerHTML += shoppingNum.map((item) => {
            return `<div class="shop-item">
                    <input type="checkbox">
                    <img src="${item.img}" alt="">
                    <span>${item.price}</span>
                    <div class="count">
                        <span class="jian">-</span>
                        <span>${item.count}</span>
                        <span class="jia">+</span>
                    </div>
                    <span class="delete">删除收藏</span>
                    <span>${item.name}</span>
                </div> `
        }).join('')

        //渲染总价和清空按钮
        var oRightTotal = document.querySelector('.right-shoppingcar .bottom');
        //获取右侧栏总价
        var totalPrice = 0;
        //定义一个空变量来计算总价
        shoppingNum.forEach((item) => {
            totalPrice += item.price * item.count;
            //总价=商品单价*商品数量
        })
        oRightTotal.innerHTML = `<div class="totalPrice">总价：${totalPrice}</div><div class="clear">清空购物车</div>`
    }
    renderRightCar()


    //绑定事件
    var oLeftGoodMenu = document.querySelector('.left-goodMenu');
    //获取左边“加入购物车”按钮
    oLeftGoodMenu.onclick = function (e) {
    //给左边的购物车按钮添加点击事件
        if (e.target.tagName == "BUTTON") {
            var btns = [...document.querySelectorAll('button')]
            //将所有的购物车按钮（伪数组）通过扩展运算符转成数组的形式
            var index = btns.findIndex((item) => {
                //通过findIndex方法找到点击目标的索引
                return item == e.target
            })
            if (shoppingNum.length == 0) {
                //通过if判断，当购物车的长度等等于0
                shoppingNum.push(goodlist[index]);
                //就把购物商品列表里商品尾插到购物车
                renderRightCar();
            } else {
                var flag = true;
                //如果不等于0，就正常加入购物车
                for (let i = 0; i < shoppingNum.length; i++) {
                    if (goodlist[index]["name"] == shoppingNum[i]["name"]) {
                        shoppingNum[i].count++;
                        flag = false
                        renderRightCar();
                        break;
                    }
                }
                if (flag === true) {
                    shoppingNum.push(goodlist[index]);
                    renderRightCar();
                }
            }
            console.log(shoppingNum);
        }
    }

    //给右边购物栏绑定点击事件
    var oRightShoppingCar=document.querySelector('.right-shoppingcar');
    //获取右边栏标签
    oRightShoppingCar.onclick=function(e){
    //给右边栏加点击事件
        if(e.target.innerText==='+'){
            var jia=[...document.querySelectorAll('.jia')]
            //获取所有加号将其从伪数组转为数组
            var index=jia.findIndex((item)=>{
            //取得加号的下标
                return item==e.target
            })
            shoppingNum[index].count++;
            //商品对应数量加一
            renderRightCar();
        }
        if(e.target.innerText==='-'){
            var jian=[...document.querySelectorAll('.jian')]
            var index=jian.findIndex((item)=>{
                return item==e.target
            })
            // shoppingNum[index].count--;
            //当购物车的商品数大于1时,加购数量就可以减，反之，就相当于清空购物车
            if(shoppingNum[index].count>1){
                shoppingNum[index].count--
            }else{
                shoppingNum.splice(index,1)
            }
            renderRightCar();
        }

        if(e.target.innerText==='删除收藏'){
        //如果我们点击的是右边购物车的删除按钮
            var dL=[...document.querySelectorAll('delete')]
            //就先获取删除按钮
            var index=dL.findIndex((item)=>{
            //找到点击对象对应的索引
                return item==e.target
                //返回满足条件的选项
            })
            shoppingNum.splice(index,1);
            //把对应商品从购物车删除
            renderRightCar();
        }
        if(e.target.innerText==='清空购物车'){
            shoppingNum=[];
            renderRightCar();
        }
    }
</script>